<template>
  <div class="col-span-1 p-4 rounded border border-stone-300">
    <div class="flex mb-8 items-start justify-between">
      <div>
        <h3 class="text-stone-500 mb-2 text-sm">{{ title }}</h3>
        <p class="text-3xl font-semibold">{{ value }}</p>
      </div>

      <span
        :class="[
          'text-xs flex items-center gap-1 font-medium px-2 py-1 rounded',
          trend === 'up'
            ? 'bg-green-100 text-green-700'
            : 'bg-red-100 text-red-700',
        ]"
      >
        <!-- Using simple text arrows for now, replace with icons later if needed -->
        <span>{{ trend === 'up' ? '⬆️' : '⬇️' }}</span>
        <span>{{ pillText }}</span>
      </span>
    </div>

    <p class="text-xs text-stone-500">{{ period }}</p>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string;
  value: string;
  pillText: string;
  trend: 'up' | 'down';
  period: string;
}>();
</script>

<style scoped>
/* Add any specific styles for Card if needed */
</style>